import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Link} from "react-router-dom";
import {actionCreators} from '../../pages/login/store';
import {Menu ,Badge, Button, Dropdown ,Icon} from 'antd';

import userURL from '../../style/img/user.jpg';

const MyIcon = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1290777_17g7h8j1k5d.js', // 在 iconfont.cn 上生成
});



class Header extends Component {
    render() {
        const {logOut} = this.props;
            return (
                <div className='header'>
                    <div className='header-title'>
                <span className='header-name'>
                    <span className='header-name-home'>Home</span>
                    <span className='ml10'>项目管理中心首页</span>
                </span>
                        <span className='header-tips'>
                     深交所中小企业之家项目管理系统
                </span>
                    </div>
                    <Dropdown overlay={
                        <Menu className='userMenu'>
                            <Menu.Item key="0">
                                <Link rel="noopener noreferrer" to="/admin/project/my">
                                    <Badge count={100} overflowCount={99}>
                                        我的任务
                                    </Badge>
                                </Link>
                            </Menu.Item>
                            <Menu.Item key="1">
                                <Link rel="noopener noreferrer" to="/admin/project/my">
                                    账户设置
                                </Link>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Link rel="noopener noreferrer" to={''} onClick={logOut}>
                                    登出
                                    <MyIcon className='ant-icon' type='iconlogout'/>
                                </Link>
                            </Menu.Item>
                        </Menu>
                    } placement="bottomRight">
                        <Badge count={100} dot offset={[-5, 5]} overflowCount={99}>
                            <Button className='user'>
                                <img src={userURL} alt='头像'/>
                            </Button>
                        </Badge>
                    </Dropdown>
                </div>
            )
        }
    }
// const mapState = (state) => ({
//     list: state.getIn(['header', 'headerList'])
// });

const mapDispatch = (dispatch) => ({
    logOut(){
       dispatch(actionCreators.logOut());
    }
});

export default connect(null, mapDispatch)(Header);
// export default Header;

